<template>
<view class="mybanner">
	<!-- 轮播图 -->
	 <!-- 轮播图区域 -->
	    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
	      <!-- 循环渲染轮播图的 item 项 -->
	      <swiper-item v-for="(item, index) in swiperList" :key="index">
	        <navigator class="swiper-item" :url="'url'+item.goods_id">
	          <!-- 动态绑定图片的 src 属性 -->
	          <image :src="item.image_src"></image>
	        </navigator>
	      </swiper-item>
	    </swiper>
</view>
</template>

<script>
	import {$http} from '@escook/request-miniprogram';
	export default {
		data() {
			return {
				name:'banner',
				// 轮播图的数据列表
				swiperList:[],
				// 分包路径
				url:'/subpkg/goods_detail/goods_detail?goods_id=',
			};
		},
		onLoad() {
			// 调用方法,获取轮播图数据
			this.getSwiperList()
		},
		methods:{
			// 获取轮播图数据
			async getSwiperList(){
			const {data:res} =	await uni.$http.get('/api/public/v1/home/swiperdata')
			console.log(res)
			// 请求失败
			if(res.meta.status!==200){
				return uni.$showMsg()
			}
			this.swiperList=res.message
			console.log(this.swiperList)
			uni.$showMsg('数据请求成功!')
			},
		}
	}
</script>

<style lang="scss">
	swiper {
	 height: 330rpx;
	}
	.swiper-item,
	image {
	  width: 100%;
	  height: 100%;
	}
</style>
